<script>

import axios from "axios";


export default {

  data() {
    return {
      dialogImportExcelVisible: false,
      //缩略图的回显
      idArr: [],
      mode: {
        title: "",
        url: "",
      },
      hobbyArr: [],
      form: {
        because: "",
      },
      rules: {
        because: [
          { required: true, message: '请输入原因', trigger: 'blur' },
        ],
      },
      imageUrl: "",
      formLabelWidth: "200px",
      dialogFormVisible: false,//为true弹窗弹起,为false弹窗隐藏    修改 添加弹窗
      page: {},//员工列表
      deptList: [],// 部门列表
      SerList: [],
      InstList: [],
      TeaList: [],
      teamList:[],
      serviceList:[],
      BqList:[],
      ItempmList:[],
      InstitutionList:[],
      DoctorList:[],
      JuminList:[],
      LocaList:[],
      searchParam: {},//搜索条件
      size: 5,//每页最大展示条件
      current: 1,//默认当前页为第一页
      dialogInfoVisible:false,   //暂时没有用到
      dialogSpVisible:false,     //没有用到
      dialogXqVisible:false,     //详情
      dialogShenqVisible:false,  //没有用到 （审批）
      dialogSstatusVisible:false,//审核通过编程待服务
      dialogSoverruleVisible:false,// 审核通过原因弹窗修改
      dialogUpdateyuanyinVisible:false,//取消预约
      dialogUpdatebohuinVisible:false,//驳回


      count:0,
    }
  },
  methods: {


    //上传成功之后执行的方法
    handleAvatarSuccess(res, file) {
      //缩略图回显
      this.imageUrl = URL.createObjectURL(file.raw);
      //给表单的图片属性赋值
      this.form.url=res;
    },
    handleImportExcelSuccess() {
      this.dialogImportExcelVisible = false;
      this.initData();
    },
    toImportExcelPage() {
      this.dialogImportExcelVisible = true;
    },
    //批量删除
    delMany() {
      if (this.idArr.length == 0) {
        this.$message.error("请至少选中一条数据");
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`/loan/delMany?idArr=${this.idArr}`).then(res => {
            if (res.data == false) {
              this.$message.error("删除失败");
            } else {
              this.$message.success("删除成功");
              this.initData();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //选中
    handleSelectionChange(val) {
      this.idArr = [];//清空
      for (let i = 0; i < val.length; i++) {
        this.idArr.push(val[i].id);
      }
    },
    //单条删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(`/loan/delById?id=${id}`).then(res => {
          if (res.data == false) {
            this.$message.error("删除失败");
          } else {
            this.$message.success("删除成功");
            this.initData();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 修改
    handleEdit(e) {
      this.mode.title = "编辑";
      this.mode.url = "http://localhost:9002/Management/update";
      this.form = e;
      // this.hobbyArr=e.hobby.split(",");
      //缩略图回显
      // this.imageUrl=e.img;
      this.dialogFormVisible = true;
      this.dialogFormTeam()
    },

    //   //驳回原因进行填充
    // handleSoverrule(e) {
    //   this.mode.title = "编辑";
    //   this.mode.url = "http://localhost:9002/Management/updateSoverrule";
    //   this.form = e;
    //   // this.hobbyArr=e.hobby.split(",");
    //   //缩略图回显
    //   // this.imageUrl=e.img;
    //   this.dialogFormVisible = false;
    // },

   //详情
    handleInfo(e){
      this.form=e;
      // this.imageUrl=e.img;
      this.dialogXqVisible = true;
    },
    //对待审核进行判断
    handleUpdateStatus(){
      axios.post(`http://localhost:9002/Management/updateStatus`,this.form).then(res=>{
        if (res.data==false){
          this.$message.error("操作失败");
        }else {
          this.$message.success("操作成功");
          this.initData();
          this.dialogSoverruleVisible=false;
          this.dialogXqVisible=false;
        }
      })
    },
    //完成服务
    handleUpdateupdateFinish(){
      axios.post(`http://localhost:9002/Management/updateFinish`,this.form).then(res=>{
        if (res.data==false){
          this.$message.error("操作失败");
        }else {
          this.$message.success("操作成功");
          this.initData();
          this.dialogUpdatebohuinVisible=false;
          this.dialogXqVisible=false;
        }
      })
    },
    //取消预约
    handleUpdateupdateupdateCancel(){
      axios.post(`http://localhost:9002/Management/updateCancel`,this.form).then(res=>{
        if (res.data==false){
          this.$message.error("操作失败");
        }else {
          this.$message.success("取消成功");
          this.initData();

          this.dialogXqVisible=false;
          this.dialogUpdateyuanyinVisible=false;
        }
      })
    },
    // 审核透过之后
    handleUpdateSstatus(){
      axios.post(`http://localhost:9002/Management/updateSstatus`,this.form).then(res=>{
        this.dialogSstatusVisible=true;
        if (res.data==false){
          this.$message.error("操作失败");
        }else {
          this.$message.success("操作成功");
          this.dialogSstatusVisible=false;
          this.dialogXqVisible=false;
          this.initData();
        }
      })
    },


    // 修改
    saveOrUpdate() {
      axios.post(this.mode.url, this.form).then(res => {
        if (res.data == false) {
          this.$message.error("操作失败");
        } else {
          this.$message.success("操作成功");
          //2.关闭弹窗
          this.dialogFormVisible = false;
          this.dialogXqVisible=false;

          //3.刷新页面
          this.initData();
        }
      })
    },
    dialogFormTeam(){
      axios.get(`http://localhost:9002/zong/findAll`).then(res=>{
        this.teamList=res.data.TeamList;
        this.serviceList=res.data.ServiceList
        this.BqList=res.data.BqList
        this.InstitutionList=res.data.InstitutionList;
        this.ItempmList=res.data.ItempmList;
        this.DoctorList=res.data.DoctorList;
        this.JuminList=res.data.JuminList;
        this.LocaList=res.data.LocaList;


      })
    },
    toAddPage() {
      this.mode.title = "添加";

      this.mode.url = "http://localhost:9002/Management/add";
      //清空表单
      this.form = {};
      this.hobbyArr = [];
      // //缩略图清空
      this.imageUrl = "";
      //弹窗弹起
      this.dialogFormVisible = true
      this.dialogFormTeam()
    },
    searchData() {
      this.current = 1;
      //再查
      this.initData();
    },
    handleCurrentChange(val) {
      this.current = val;
      //再查
      this.initData();
    },
    //当每页最大展示条数发生改变的时候
    handleSizeChange(val) {
      this.size = val;
      //再查
      this.initData();
    },
    toRes() {
      this.searchParam = {};
    },
    initData() {
      axios.post(`http://localhost:9002/Management/findAll?current=${this.current}&size=${this.size}`, this.searchParam).then(res => {
        //this.属性名表示全局变量
        this.page = res.data;
      });
    },
    // initDeptList(){
    //   axios.post("http://localhost:9002/Loca/findAll").then(res=>{
    //     //this.属性名表示全局变量
    //     this.deptList=res.data.deptList;
    //   })
    // },
    findAllZlService(){
      axios.get("http://localhost:8300/phl/service/findAllServiceList").then(res=>{
        this.SerList=res.data.data
      })
    },
    findAllZlTeam(){
      axios.get("http://localhost:8300/phl/team/findTeam").then(res=>{
        this.TeaList=res.data.data
      })
    },
    findAllInstitution(){
      axios.get("http://localhost:8300/phl/institution/findName").then(res=>{
        this.InstList=res.data.data
      })
    },
    // initTeamList(){
    //   axios.post("http://localhost:9002/team/findAll").then(res=>{
    //     //this.属性名表示全局变量
    //     this.deptList=res.data;
    //   })
    // }
  },
  created() {
    this.initData();
    this.findAllZlService();
    this.findAllZlTeam();
    this.findAllInstitution();
    this.dialogFormTeam();
    this.initDeptList();
    // this.initTeamList();
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },

}
</script>

<template>

  <div>
    总申请数：{{page.total}}
<!--    申请通过数:-->
<!--    申请拒绝数：-->
    <br>
    名称：<el-input v-model="searchParam.sname" placeholder="请输入姓名" style="width: 200px"></el-input>

    服务状态：<el-select v-model="searchParam.sstatus" placeholder="请选择" style="width: 200px">
    <el-option value="1" label="待服务">待服务</el-option>
    <el-option value="2" label="待审核">待审核</el-option>
    <el-option value="3" label="已驳回">已驳回</el-option>
    <el-option value="4" label="已服务">已服务</el-option>
    <el-option value="5" label="已取消">已取消</el-option>
  </el-select>
    签约机构
    <el-select v-model="searchParam.instid" placeholder="请选择">
      <el-option
          v-for="item in InstList"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>

    团队
      <el-select v-model="searchParam.teamid" placeholder="请选择">
        <el-option
            v-for="item in TeaList"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
服务报
    <el-select v-model="searchParam.serviceid" placeholder="请选择">
      <el-option
          v-for="item in SerList"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>

      <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
      </el-date-picker>



    <el-button type="primary" @click="searchData">搜索</el-button>
    <el-button type="primary" @click="toRes">重置</el-button>

    <!-- 修改-->
    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="输入居民" :label-width="formLabelWidth">
          <el-select v-model="form.juminid" placeholder="请选择">
            <el-option
                v-for="item in JuminList"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.sidnumber" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>  <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.sphone" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.ssex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="出生年月" :label-width="formLabelWidth">
<!--          <el-date-picker v-model="form.startime" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker> 至-->
          <el-date-picker v-model="form.sentdate" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
        </el-form-item>

        <el-form-item label="现居地" :label-width="formLabelWidth">
          <el-input v-model="form.sxian" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>

        <el-form-item label="标签" :label-width="formLabelWidth">
          <el-select v-model="form.bqid" placeholder="请选择">
            <el-option
                v-for="item in BqList"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        服务信息
        服务编号：{{form.sid}}

        <el-form-item label="服务机构" :label-width="formLabelWidth">
          <el-select v-model="form.instid" placeholder="请选择">
            <el-option
                v-for="item in InstitutionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="团队服务" :label-width="formLabelWidth">
          <el-select v-model="form.teamid" placeholder="请选择">
            <el-option
                v-for="item in teamList"

                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务医生" :label-width="formLabelWidth">
          <el-select v-model="form.doctorid" placeholder="请选择">
            <el-option
                v-for="item in DoctorList"
                :label="item.doctorName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="服务包" :label-width="formLabelWidth">
          <el-select v-model="form.serviceid" placeholder="请选择">
            <el-option
                v-for="item in serviceList"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务项目" :label-width="formLabelWidth">
          <el-select v-model="form.itempmid" placeholder="请选择">
            <el-option
                v-for="item in ItempmList"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务地点" :label-width="formLabelWidth">
          <el-select v-model="form.locaid" placeholder="请选择">
            <el-option
                v-for="item in LocaList"
                :label="item.locaname"
                :value="item.locaid">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务备注" :label-width="formLabelWidth">
          <el-input v-model="form.sbeizhu" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

<!--详情-->
    <el-dialog :title="mode.title" :visible.sync="dialogXqVisible">
      <el-form :model="form">
        <h1>居民详情</h1><br>
          <h3>居民信息</h3><br>
          姓名: {{form.sname}}<br>
        身份证号码：{{form.sidcard}}<br>
        性别：{{form.sex==1 ? '男' : '女'}}<br>
        联系电话：{{form.sphone}}<br>
        现居地：{{form.sxian}}<br>
        <h3>服务信息</h3><br>
        服务编号: {{form.sid}}<br>
<!--        服务状态：{{form.sstatus==1?'待服务':(sstatus==2?'待审核':'已驳回')}}<br>-->
        服务状态： <el-tag v-if="form.sstatus==1" type="warning">待审核</el-tag>
        <el-tag v-else-if="form.sstatus==2" type="primary">待服务</el-tag>
        <el-tag v-else-if="form.sstatus==3" type="danger">已驳回</el-tag>
        <el-tag v-else-if="form.sstatus==4" type="success">已服务</el-tag>
        <el-tag v-else-if="form.sstatus==5" type="info">已取消</el-tag>
        服务机构：{{form.institutionName}}<br>
        服务医生：{{form.doctorName}}<br>
        服务项目：{{form.itempmName}}<br>
        服务包名：{{form.serviceName}}<br>
<!--        服务地点：{{form.instName}}<br>-->
        服务时间：{{form.senddate | format('yyyy-MM-dd')}}<br>
        提交时间：{{form.senddate}}<br>
        服务备注：{{form.sbeizhu}}
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogXqVisible = false">取 消</el-button>
        <el-button @click="dialogXqVisible = false">完 成</el-button>
        <el-button v-if="this.form.sstatus==1" @click="dialogFormVisible=true">编辑商品</el-button>
        <el-button v-if="this.form.sstatus==1" @click="dialogSstatusVisible=true">审核通过</el-button>
        <el-button v-if="this.form.sstatus==1" @click="dialogSoverruleVisible=true">驳回</el-button>
        <el-button v-if="this.form.sstatus==2" @click="dialogUpdatebohuinVisible=true">完成服务</el-button>
        <el-button v-if="this.form.sstatus==2" @click="dialogUpdateyuanyinVisible=true">取消预约</el-button>

      </div>
    </el-dialog>
    <!--   审合通过弹窗-->
    <el-dialog :title="mode.title" :visible.sync="dialogSstatusVisible">
      <h2>是否要通过审核</h2>
      <div class="dialog-footer">
        <el-button @click="dialogSstatusVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateSstatus">确 定</el-button>
      </div>
    </el-dialog>
    <!--   驳回原因-->
    <el-dialog :title="mode.title" :visible.sync="dialogSoverruleVisible">
      <el-form :model="form">
        <el-form-item label="驳回原因" :label-width="formLabelWidth">
          <el-input v-model="form.soverrule" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogSoverruleVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateStatus">确 定</el-button>
      </div>
    </el-dialog>
<!--    //完成服务-->
    <el-dialog :title="mode.title" :visible.sync="dialogUpdatebohuinVisible">
      <el-form :model="form">
        <el-form-item label="血压" :label-width="formLabelWidth">
          <el-input v-model="form.spressure" autocomplete="off" placeholder="请选择" >mmHg</el-input>
        </el-form-item>
        <el-form-item label="空腹血糖" :label-width="formLabelWidth">
          <el-input v-model="form.ssugar" autocomplete="off" placeholder="请选择" >mmHg</el-input>
        </el-form-item>
        <el-form-item label="心率" :label-width="formLabelWidth">
          <el-input v-model="form.sheart" autocomplete="off" placeholder="请选择" >mmHg</el-input>
        </el-form-item>
        <el-form-item label="病情描述" :label-width="formLabelWidth">
          <el-input v-model="form.sdescription" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
        <el-form-item label="健康指导" :label-width="formLabelWidth">
          <el-input v-model="form.sguide" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogUpdatebohuinVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateupdateFinish">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="mode.title" :visible.sync="dialogUpdateyuanyinVisible">
      <el-form :model="form">
        <el-form-item label="取消原因" :label-width="formLabelWidth">
          <el-input v-model="form.soverrule" autocomplete="off" placeholder="请选择" ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogUpdateyuanyinVisible = false">取 消</el-button>
        <el-button type="primary"  @click="handleUpdateupdateupdateCancel">确 定</el-button>
      </div>
    </el-dialog>

    <br>
    <el-button type="primary" @click="toAddPage">添加</el-button>

    <el-table
        :data="page.records"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="sid"
          label="服务管理ID">
      </el-table-column>
      <el-table-column
          prop="juminName"
          label="服务管理编号">
      </el-table-column>
      <el-table-column
          prop="sidnumber"
          label="身份证号">
      </el-table-column>
      <el-table-column
          prop="sphone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="sstatus"
          label="服务状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sstatus==1" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.sstatus==2" type="primary">待服务</el-tag>
          <el-tag v-else-if="scope.row.sstatus==3" type="danger">已驳回</el-tag>
          <el-tag v-else-if="scope.row.sstatus==4" type="success">已服务</el-tag>
          <el-tag v-else-if="scope.row.sstatus==5" type="info">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="serviceName"
          label="服务包">
      </el-table-column>
      <el-table-column
          prop="itempmName"
          label="服务项目">
      </el-table-column>
      <el-table-column
          prop="sjoindate"
          label="申请时间">
        <template slot-scope="scope">
          {{scope.row.sjoindate | format('yyyy-MM-dd')}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button  size="small" @click="handleEdit(scope.row)">编辑商品</el-button>
          <el-button  size="small" @click="handleInfo(scope.row)">详情</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[2, 200, 300, 400]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
  </div>
</template>

<style scoped>


</style>
